<style scoped="true" lang="less">
    .list {
        padding: 0 15px;
        background: #f9f9f9;
    }

    .item {
        height: 124px;
        padding: 20px 0;
        border-bottom: 1px dotted #c9c9c9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
        .img {
            width: 60px;
            height: 84px;
        }
        .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 2;
            margin-left: 10px;
            height: 100%;
        }
    }

    .right {
        .film-desc {
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        .count {
            span:last-child {
                margin-left: 40px;
            }
        }
    }

</style>
<template>
    <van-list v-model="loading" :finished="finished" :offset="300" @load="loadMore">
        <ul class="list" ref="list" v-on:scroll.native="loadMore">
            <li v-for="(item) in list" :key="item.id">
                <router-link class="item" :to="`detail/${item.id}`">
                    <img class="img" :src="item.cover.origin" />
                    <div class="right">
                        <p class="film-desc">
                            <span class="name f16">{{item.name}}</span>
                            <span class="score cfc">{{item.grade}}<van-icon name="arrow f10"></van-icon></span>
                        </p>
                        <p class="film-intro">
                            {{item.intro}}
                        </p>
                        <p class="count">
                            <span class="f12 c8a">{{item.cinemaCount}}</span>家影院上映
                            <span class="f12 c8a">{{item.watchCount}}</span>人购票
                        </p>
                    </div>
                </router-link>

            </li>
        </ul>
    </van-list>
</template>

<script>
    import {
        fetch
    } from '@/utils'
    import {
        List,
        Cell,
        Icon
    } from 'vant';
    export default {
        props: ['path'],
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                // 当前页数
                page: 1,
                // 总页数
                total: 1,
                url: '',
                // 请求中
                fetching: false
            }
        },
        components: {
            [List.name]: List,
            [Cell.name]: Cell,
            [Icon.name]: Icon
        },
        created() {
            this.url = `/film/${this.path}`;
            this.getFilmList();

        },
        methods: {
            loadMore() {
                if (this.page > this.total) {
                    this.loading = false;
                    this.finished = true;
                } else {
                    // 请求中不发送请求,避免同时发两次请求
                    if (!this.fetching) {
                        this.getFilmList();
                    }
                }
            },
            // 获取现在播放电影列表
            getFilmList() {
                const data = {
                    page: this.page,
                    count: 7
                }
                this.fetching = true;
                fetch(this.url, data, (res) => {
                    // 首次获取列表
                    if (this.page === 1) {
                        this.list = res.films;
                        this.total = res.page.total;
                    } else {
                        // 新旧两个数组合并
                        this.list = [
                            ...this.list,
                            ...res.films
                        ];
                    }
                    this.page = ++this.page;
                    this.$nextTick(function() {
                        this.fetching = false;
                        this.loading = false;
                    })
                })
            }
        }
    }

</script>
